<template>
  <transition name="dialog-fade">
    <div v-if="show" class="confirm-dialog-overlay" @click="handleCancel">
      <transition name="dialog-scale">
        <div v-if="show" class="confirm-dialog" @click.stop>
          <div class="dialog-icon" v-if="icon">{{ icon }}</div>
          
          <h3 class="dialog-title">{{ title }}</h3>
          
          <p class="dialog-message">{{ message }}</p>
          
          <div class="dialog-buttons">
            <button 
              class="dialog-btn dialog-btn-secondary" 
              @click="handleCancel"
              :tabindex="2"
            >
              {{ cancelText }}
            </button>
            <button 
              class="dialog-btn dialog-btn-primary" 
              @click="handleConfirm"
              :class="{ danger: isDanger }"
              :tabindex="1"
              ref="confirmBtn"
            >
              {{ confirmText }}
            </button>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'

const props = withDefaults(defineProps<{
  show: boolean
  title: string
  message: string
  confirmText?: string
  cancelText?: string
  icon?: string
  isDanger?: boolean
}>(), {
  confirmText: '确定',
  cancelText: '取消',
  icon: '⚠️',
  isDanger: false
})

const emit = defineEmits<{
  confirm: []
  cancel: []
}>()

const confirmBtn = ref<HTMLButtonElement>()

watch(() => props.show, (newVal) => {
  if (newVal) {
    nextTick(() => {
      confirmBtn.value?.focus()
    })
  }
})

function handleConfirm() {
  emit('confirm')
}

function handleCancel() {
  emit('cancel')
}

function handleKeydown(e: KeyboardEvent) {
  if (!props.show) return
  
  if (e.key === 'Enter') {
    e.preventDefault()
    handleConfirm()
  } else if (e.key === 'Escape') {
    e.preventDefault()
    handleCancel()
  }
}

onMounted(() => {
  window.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown)
})
</script>

<style scoped>
.confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20001;
}

.confirm-dialog {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  border-radius: 16px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(0, 0, 0, 0.1) inset;
  padding: 28px 24px 20px;
  width: 90%;
  max-width: 380px;
  text-align: center;
}

.dialog-icon {
  font-size: 48px;
  margin-bottom: 12px;
  line-height: 1;
}

.dialog-title {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 12px;
  line-height: 1.3;
}

.dialog-message {
  font-size: 14px;
  color: #86868b;
  line-height: 1.6;
  margin: 0 0 24px;
  white-space: pre-line;
}

.dialog-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.dialog-btn {
  flex: 1;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.dialog-btn:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);
}

.dialog-btn-secondary {
  background: rgba(0, 0, 0, 0.06);
  color: #1d1d1f;
}

.dialog-btn-secondary:hover {
  background: rgba(0, 0, 0, 0.1);
}

.dialog-btn-secondary:active {
  background: rgba(0, 0, 0, 0.15);
  transform: scale(0.98);
}

.dialog-btn-primary {
  background: var(--accent-color);
  color: white;
}

.dialog-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}

.dialog-btn-primary:active {
  transform: translateY(0);
}

.dialog-btn-primary.danger {
  background: #ff3b30;
}

.dialog-btn-primary.danger:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.4);
}

.dialog-btn-primary.danger:focus {
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.3);
}

/* 弹窗动画 */
.dialog-fade-enter-active {
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dialog-fade-leave-active {
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dialog-fade-enter-from,
.dialog-fade-leave-to {
  opacity: 0;
}

.dialog-scale-enter-active {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dialog-scale-leave-active {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dialog-scale-enter-from {
  opacity: 0;
  transform: scale(0.9) translateY(-10px);
}

.dialog-scale-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

/* 暗色模式支持 */
html.dark-mode .confirm-dialog {
  background: rgba(50, 50, 52, 0.98);
}

html.dark-mode .dialog-title {
  color: #f5f5f7;
}

html.dark-mode .dialog-message {
  color: #aeaeb2;
}

html.dark-mode .dialog-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f7;
}

html.dark-mode .dialog-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

html.dark-mode .dialog-btn-secondary:active {
  background: rgba(255, 255, 255, 0.2);
}

/* 响应式 */
@media (max-width: 480px) {
  .confirm-dialog {
    max-width: 340px;
    padding: 24px 20px 18px;
  }

  .dialog-icon {
    font-size: 42px;
  }

  .dialog-title {
    font-size: 17px;
  }

  .dialog-message {
    font-size: 13px;
  }

  .dialog-buttons {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .dialog-btn {
    width: 100%;
  }
}
</style>

